<!-- 
// delshow  控制组件显示隐藏
  
// backgroundImage  底部渐变色块 传递字符串
// delbackclose  取消按钮背景
// delclosecolor  取消按钮字体颜色
// delclosefontsize  取消按钮字体大小
// delsurebackground  确定按钮背景
// delsurecolor  确定按钮字体颜色
// delsurefontsize  确定按钮字体大小
// iconbackimgone  头部icon外一背景backgroundImage
// iconbackimgtwo  头部icon外二背景backgroundImage
// iconbackimgthree  头部icon外三背景backgroundImage

// deltexttitle  文本内容

// deldelclass  删除弹窗类名(不包含蒙层) 字符串写样式 或者 变量写对象
// delmasksclass  删除弹窗类名(包含蒙层) 字符串写样式 或者 变量写对象

// delfooterslot  底部色框插槽
// delbuttonslot  确定取消按钮插槽
// deltextslot  文本框插槽
// deliconsslot  头部图标整体插槽
// deliconslot  头部图标最内层插槽
// delonly  删除弹窗整体

// shanchu  删除方法  参数true为删除,false为取消
-->
<template>
  <!-- 遮罩层 -->
  <transition name="fade">
    <div class="masks" :class="[props.delmasksclass ? props.delmasksclass : '']" v-show="delshow"
      @click.stop="$emit('shanchu', false)">
      <div class="deibigbox" @click.stop>
        <div class="text">
          <div class="text_wen">{{ props.deltexttitle ? props.deltexttitle : '是否删除当前所选内容' }}</div>
        </div>
        <div class="btn">
          <button class="delnone" @click.stop="$emit('shanchu', false)">取消</button>
          <button class="delsure" @click.stop="$emit('shanchu', true)">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script lang="ts" setup>
const props = defineProps([
  "backgroundImage",
  "delclosebackground",
  "delsurebackground",
  "delclosecolor",
  "delsurecolor",
  "delclosefontsize",
  "delsurefontsize",
  "deltexttitle",
  "iconbackimgone",
  "iconbackimgtwo",
  "iconbackimgthree",
  "deldelclass",
  "delmasksclass",
  "delshow"
]);
</script>
<style lang="scss" scoped>
.deibigbox {
  width: 360px;
  height: 142px;
  background: #22252c;
  box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.1);
  border-radius: 16px;
  position: relative;

  .btn {
    position: absolute;
    bottom: 24px;
    right: 28px;
  }

  button {
    width: 60px;
    height: 28px;
    outline: none;
    border: none;
    border-radius: 5px;
  }

  .delnone {
    margin: 4px;
    background-color: transparent;
  }

  .delsure {
    background-color: #7a8eff;
    color: #fff;
  }
}

.masks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
}

.del {
  width: 340px;
  height: 238px;
  background: #fff;
  border-radius: 25px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .delfooter {
    display: inline-block;
    position: absolute;
    bottom: -20px;
    width: 280px;
    height: 20px;
    background-image: linear-gradient(135deg, #d583f1 0%, #75cdef 100%, #aae1f5 100%);
    border-radius: 0 0 25px 25px;
  }
}

.del_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-200px);
  color: #fff;

  .circular_one {
    width: 168px;
    height: 166.54px;
    background-image: linear-gradient(135deg, rgba(213, 131, 241, 0.3) 0%, rgba(117, 205, 239, 0.3) 100%, rgba(170, 225, 245, 0.3) 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .circular_two {
      width: 134px;
      height: 132.83px;
      background-image: linear-gradient(135deg, rgba(213, 131, 241, 0.6) 0%, rgba(117, 205, 239, 0.6) 100%, rgba(170, 225, 245, 0.6) 100%);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .circular_three {
      width: 108px;
      height: 108px;
      background-image: linear-gradient(135deg, #d583f1 0%, #75cdef 100%, #aae1f5 100%);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .icon {
    font-size: 48px;
  }
}

.text {
  position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(0, -50%);
  margin-left: 20px;
  margin-top: 30px;
  margin-right: 20px;
  // width: 100%;
  // height: 18px;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #cfd0d9;
  letter-spacing: 1.8px;
  line-height: 1.5;
  font-weight: 400;

  // .text_wen {
  //   text-align: center;
  // }
}

.del_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  display: flex;

  button:hover {
    cursor: pointer;
  }

  .none {
    margin: 0 14px;
    width: 90px;
    height: 40px;
    border: 1px solid rgba(205, 213, 253, 1);
    border-radius: 10px;
    background-color: #fff;
    color: #8A9CD9;
    font-size: 18px;
  }

  .sure {
    margin: 0 14px;
    width: 90px;
    height: 40px;
    background: rgba(104, 108, 232, 1);
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 18px;
  }
}

.fade-enter-active {
  animation: delshow 0.3s linear;
}

.fade-leave-active {
  animation: delhide 0.3s linear;
}

.delcenter-enter-active {
  animation: deldelshow 0.3s linear;
}

.delcenter-leave-active {
  animation: deldelhide 0.3s linear;
}

// 出现动画
@keyframes delshow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 隐藏动画
@keyframes delhide {
  0% {
    opacity: 1;
    // transform: translateY(0px);
  }

  100% {
    opacity: 0;
    // transform: translateY(-30px);
  }
}

@keyframes deldelshow {
  0% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes deldelhide {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}
</style>